<template>
  <div
    v-loading="isLoading > 0"
    class="page-container"
  >
    <page-tools>
      <template #left>
        <el-form
          ref="formSearch"
          size="mini"
          :inline="true"
          :model="formSearch"
          class="demo-form-inline"
        >
          <el-form-item label="用户id">
            <el-input
              v-model="formSearch.id"
              style="width: 100px;"
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="formSearch.mobile"
              style="width: 100px;"
            />
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input
              v-model="formSearch.true_name"
              style="width: 100px;"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="formSearch.status"
              placeholder="选择状态"
            >
              <el-option
                v-for="item in status_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click.prevent="onResetForm"
            >清空</el-button>
            <el-button
              type="primary"
              @click.prevent="onSearch"
            >查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- <template #right>
        <el-button
          type="primary"
          size="mini"
          @click="addUser"
        >新增城市</el-button>
      </template> -->
    </page-tools>

    <el-card style="margin-top: 10px;">
      <el-table
        :data="userList"
        border
      >
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
          fixed="left"
          width="60"
          sortable
        />
        <el-table-column
          label="用户id"
          prop="user_id"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="手机号"
          prop="mobile"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="真实姓名"
          prop="true_name"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="状态"
          prop="status"
          fixed="left"
          align="center"
        >
          <template slot-scope="{row}">
            <span v-if="row.status == 1">刚注册</span>
            <span v-if="row.status == 2">可提现</span>
            <span v-if="row.status == -9">提现冻结</span>
          </template>
        </el-table-column>
        <el-table-column
          label="是否开通api"
          prop="is_open_api"
          fixed="left"
          align="center"
        >
          <template slot-scope="{row}">
            <span v-if="row.status == 1">开通api</span>
            <span v-if="row.status == -1">未开通api</span>
          </template>
        </el-table-column>
        <el-table-column
          label="二维码"
          prop="qrcode_img"
          fixed="left"
          align="center"
        >
          <template slot-scope="{row}">
            <img
              :src="row.qrcode_img"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column
          label="分成比例"
          prop="profit_percent"
          fixed="left"
          align="center"
        >
          <template slot-scope="{row}">
            <span v-if="row.profit_percent">{{ row.profit_percent }}%</span>
          </template>
        </el-table-column>
        <el-table-column
          label="总充值金额"
          prop="amount"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="余额"
          prop="balance"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="总用户数"
          prop="user_count"
          fixed="left"
          align="center"
        />
        <el-table-column
          class-name="handle-body"
          label="操作"
          width="180"
        >
          <template #default="{ row }">
            <el-button
              type="primary"
              @click="edit(row)"
            >编辑</el-button>
            <el-button
              type="danger"
              @click="del(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div style="height: 60px; margin-top: 10px">
        <el-pagination
          :current-page="formSearch.page_num"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="formSearch.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <add-edit
      ref="AddEditDialog"
      @refresh="getAgentUserList"
    />
  </div>
</template>

<script>
const formSearch = {
  id: '',
  mobile: '',
  status: '',
  true_name: '',
  page_num: 1,
  page_size: 10
}
import { getAgentUserList, deleteOneAgentUser } from '@/api/agent_user'
import CONST from '@/utils/const'
import AddEdit from './components/AddEdit.vue'
export default {
  name: 'AgentUser',
  components: {
    AddEdit
  },

  data () {
    return {
      formSearch: {},
      isLoading: 0,
      userList: [],
      status_list: [
        { value: 1, label: '刚注册' },
        { value: 2, label: '可提现' },
        { value: -9, label: '提现冻结' }
      ],
      total: 0
    }
  },
  computed: {},
  created () {
    this.initFormSearch()
    this.getAgentUserList()
  },
  mounted () { },
  methods: {
    dataChange (val) {
      console.log(val)
    },
    initFormSearch () {
      this.formSearch = Object.assign({}, formSearch, this.$route.query)
      this.formSearch.page_num = Number.parseInt(this.formSearch.page_num)
      this.formSearch.page_size = Number.parseInt(this.formSearch.page_size)
    },
    changeQuery () {
      // 获取当前的query参数
      const currentQuery = this.$route.query

      // 将新的筛选条件合并到query参数中
      const newQuery = Object.assign({}, currentQuery, this.formSearch)

      // 使用Vue Router的replace方法更新URL
      this.$router.replace({ query: newQuery })
    },
    onResetForm () {
      this.formSearch = { ...formSearch }
      this.changeQuery()
      this.getAgentUserList()
    },
    onSearch () {
      this.formSearch.page_num = 1
      this.formSearch.page_size = 10
      this.changeQuery()
      this.getAgentUserList()
    },
    edit (row) {
      this.$refs.AddEditDialog.open(row)
    },
    add () {
      this.$refs.AddEditDialog.open()
    },
    del (row) {
      this.$confirm('确定要进行次操作么？', '温馨提示').then(async () => {
        this.isLoading++
        await deleteOneAgentUser(row.id)
        await this.getAgentUserList()
        this.isLoading--
      })
    },
    addUser () {
      this.$refs.AddEditDialog.open()
    },
    editUser (row) {
      this.$refs.AddEditDialog.open(row)
    },
    formatGender (row) {
      const gender = CONST.GENDER_LIST.find(item => item.id === row.gender)
      return gender ? gender.gender_name : ''
    },
    changeStatus (row) {
      this.$prompt('确定要进行此次操作么？请输入『确定』', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async ({ value }) => {
        if (value === '确定') {
          try {
            this.isLoading++
            await updateOneUser({
              id: row.id,
              status: row.status === 1 ? -1 : 1
            })

            await this.getAgentUserList()
          } finally {
            this.isLoading--
          }
        } else {
          this.$message.error('输入错误')
        }
      })
    },
    async getAgentUserList () {
      try {
        this.isLoading++
        const { id, status, page_num, page_size, mobile, true_name } = this.formSearch
        const res = await getAgentUserList({
          id: id ? Number.parseInt(id) : null,
          status: status || null,
          mobile: mobile || null,
          true_name: true_name || null,
          page_num: Number.parseInt(page_num),
          page_size: Number.parseInt(page_size)
        })
        this.total = res.total
        this.userList = res.list
      } finally {
        this.isLoading--
      }
    },
    indexMethod (index) {
      return index + 1 + (this.formSearch.page_num - 1) * this.formSearch.page_size
    },
    handleSizeChange (val) {
      this.formSearch.page_num = 1
      this.formSearch.page_size = val
      this.changeQuery()
      this.getAgentUserList()
    },
    handleCurrentChange (val) {
      this.formSearch.page_num = val
      this.changeQuery()
      this.getAgentUserList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
